<template>
  <div class="footerAuido">
    <div class="container">
      <div class="btns">
        <a href="javascript:;" @click="left" class="plv"></a>
        <a
          @click="play($event)"
          v-show="flag"
          href="javascript:;"
          class="play"
        ></a>
        <a
          @click="play($event)"
          v-show="!flag"
          style="background-position: -40px -165px"
          href="javascript:;"
          class="play"
        ></a>
        <a href="javascript:;" class="next" @click="right"></a>
      </div>
      <div class="pic">
        <a href="">
          <img
            width="100%"
            v-if="this.$store.state.song.pic !== ''"
            height="100%"
            :src="this.$store.state.song.pic"
            alt=""
          />
          <img
            width="100%"
            v-else
            height="100%"
            src="http://p4.music.126.net/Ggpf7jURLCUKKlT4qAUW4Q==/109951165929809633.jpg"
            alt=""
          />
        </a>
      </div>
      <div class="play">
        <div class="playtop">
          <a href="">{{ this.$store.state['song/name'] }}</a>
          <!--          <span>乐队名暂无</span>-->
          <a href="javascript:;" class="src"></a>
        </div>
        <div class="play-audio">
          <audio
            ref="audio"
            @click="play"
            :src="this.$store.state.song.song"
            autoplay
            controls="controls"
            loop="loop"
          ></audio>
          <i></i>
        </div>
      </div>
      <!-- <div class='oper'>
        <a href="javascript:;" class="icn-add" title="收藏">收藏</a>
        <a href="javascript:;" class="icn-share" title="分享">分享</a>
      </div> -->
      <!-- <div class='set'>
        <div class=''></div>
        <i></i>
        <a href="javascript:;" class="icn-vol"></a>
        <a href="javascript:;" class="icn-loop" title="循环"></a>
      </div> -->
      <div class="main" @click="drawer">
        <span></span>
        <a href="javascript:;" v-if="list !== null">{{list.length}}</a>
        <a href="javascript:;" v-else>0</a>
      </div>
      <div class="drawer" v-if="show">
        <div class="header">
          <div class="left">
            播放列表({{ list.length }})
          </div>
          <div class="center">
            <p>收藏全部</p>
            <p>清除</p>
          </div>
          <div class="clear">
            <span>{{ name }}</span>
            <i @click="cloose" class="el-icon-close"></i>
          </div>
        </div>
        <!-- 歌曲信息 -->
        <div class="songmassage">
          <div class="left">
            <!-- 歌曲名 -->
            <div
              class="songname"
              @click="playmusic(item.id, index, item)"
              v-for="(item, index) in list"
              :key="index"
            >
              <div class="user">
                <i
                  class="playicon"
                  :class="current == index + 0 ? 'active' : ''"
                ></i>
                <span>{{ item.name }}</span>
              </div>
              <div class="message">
                <!-- 作者名 -->
                <span class="anthor">
                  {{ item.ar[0].name }}
                  <span v-if="item.ar.length == 2">{{ item.ar[1].name }}</span>
                </span>
                <!-- 歌曲时间 -->
                <span class="time">{{ item.dt | time }}</span>
                <!-- 转发图标 -->
                <span class="icon"></span>
              </div>
            </div>
            <!-- 作者 & 歌曲信息 -->
          </div>
          <!-- 歌词 -->
          <div class="right">
            <ul class="lyric" ref="lyric">
              <li
                :class="{ each: true, choose: index == lyricIndex }"
                v-for="(item, key, index) in currentMUsicLyric"
                :key="key"
              >
                {{ item }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import songlist from '../../store/index'
export default {
  name: 'Audio',
  data() {
    return {
      songurl: '',
      flag: true,
      show: false,
      current: 1, //红色播放小图标
      name: '', //当前播放歌曲的名字
      lyric: '', //歌词
      currentMUsicLyric: '',
      lyricIndex: '',
      isShowMusicList: '',
      value: '',
    }
  },

  computed: {
    list() {
      return songlist._modules.root.state.song.songlist
    },
  },
  watch: {
    // 使用watch监听当前歌曲进度value的变化处理歌词位置
    value() {
      var audio = this.$refs.audio
      console.log(this.currentMUsicLyric)
      let i = 0
      // 循环歌词对象
      for (let key in this.currentMUsicLyric) {
        // key表示歌词对象中的时间，如果key等于歌曲进度value，改变当前歌词进度		lyricIndex
        if (+key == this.value) {
          this.lyricIndex = i
          // 当歌词进度大于5，即播放到了第5句歌词，开始滚动
          if (i > 5) {
            this.$refs.lyric.scrollTop = 30 * (i - 5)
          }
        }
        i++
      }
    },
  },
  methods: {
    left() {
      if (this.$store.state.song.songlist == '')
        return this.$message.error('播放列表暂无歌曲')
      if (this.current !== 1) {
        this.current--
      } else {
        this.current = 1
      }
    },
    right() {
      if (this.$store.state.song.songlist == '')
        return this.$message.error('播放列表暂无歌曲')
      if (this.current >= this.$store.state.song.songlist.length) {
        this.current = this.$store.state.song.songlist.length
      } else {
        this.current++
      }
    },
    play(e) {
      if (this.$store.state.song.song == '')
        return this.$message.error('播放列表暂无歌曲')
      var audio = this.$refs.audio
      console.log(audio.currentTime)
      this.flag = !this.flag
      if (audio.paused) {
        audio.play()
      } else {
        audio.pause()
      }
    },
    //播放音乐
    async playmusic(id, index, item) {
      this.flag = !this.flag
      this.current = index //切换
      this.name = item.name
      this.$store.commit('song/getpic', item.al.picUrl) //把图片地址存到 x
      this.$http(`/song/url?`, {
        params: {
          id,
        },
      }).then((res) => {
        var url = res.data.data[0].url
        if (url !== null) {
          this.$store.commit('song/getsong', url)
        } else {
          this.$router.push('/error')
        }
      })
      // 获取歌词
      const { data: res } = await this.$http(`/lyric?id=${id}`)
      if (res.code !== 200) return this.$message.error('搜素失败')

      // 处理歌词，转化成key为时间，value为歌词的对象
      let lyricArr = res.lrc.lyric.split('[').slice(1) // 先以[进行分割
      let lrcObj = {}
      lyricArr.forEach((item) => {
        let arr = item.split(']') // 再分割右括号
        // 时间换算成秒
        let m = parseInt(arr[0].split(':')[0])
        let s = parseInt(arr[0].split(':')[1])
        arr[0] = m * 60 + s
        if (arr[1] != '\n') {
          // 去除歌词中的换行符
          lrcObj[arr[0]] = arr[1]
        }
      })
      // 存储数据
      this.currentMUsicLyric = lrcObj
    },
    // 打开关闭弹出播放列表
    drawer() {
      this.show = !this.show
    },
    cloose() {
      this.show = false
    },
  },
  filters: {
    time(v) {
      return moment(v).format('mm:ss')
    },
  },
  created(){
    const data = JSON.parse(localStorage.getItem('top') )
    console.log(data)
  }
}
</script> 

<style scoped lang="less">
.lyric {
  width: 95%;
  height: 96%;
  // background-color: #333;
  // 滚动条
  overflow: auto;
  color: #ddd;
  font-size: 10px;
  font-weight: normal;
  padding: 5px 10px;
  border-left: none;
  .each {
    height: 30px;
    // border: 1px solid #000;
    line-height: 30px;
    text-align: center;
  }
  .choose {
    height: 30px;
    line-height: 30px;
    font-size: 20px;
  }
  // 修改滚动条样式
  &::-webkit-scrollbar {
    width: 3px;
    // height: 50px;
  }
  // 滑块部分
  &::-webkit-scrollbar-thumb {
    background-color:red;
  }
  // 轨道部分
  &::-webkit-scrollbar-track {
    background-color: #333;
  }
}

.active {
  opacity: 1 !important;
  color: white !important;
}
audio {
  outline: none;
}
.main a {
  display: block;
  float: none;
  width: 38px;
  padding-left: 21px;
  line-height: 27px;
  text-align: center;
  color: #666;
  text-shadow: 0 1px 0 #080707;
  text-indent: 0;
  text-decoration: none;
  height: 25px;
  background: url('../../assets/images/playbar.png') -42px -68px;
  margin: 11px 2px 0 0;
}
.main {
  width: 59px;
  height: 36px;
  position: relative;
  zoom: 1;
}
.set a {
  background: url('../../assets/images/playbar.png');
  text-decoration: none;
  color: #333;
}
.set .icn-vol {
  float: left;
  width: 25px;
  height: 25px;
  margin: 11px 2px 0 0;
  text-indent: -9999px;
  background-position: -2px -248px;
  cursor: pointer;
}
.set .icn-loop {
  float: left;
  width: 25px;
  height: 25px;
  margin: 11px 2px 0 0;
  text-indent: -9999px;
  background-position: -66px -248px;
  cursor: pointer;
}
.set i {
  background: url('../../assets/images/playbar.png') -147px -238px;
  width: 10px;
  height: 100%;
  float: left;
}
.set {
  position: relative;
  z-index: 10;
  width: 70px;
  padding-left: 13px;
}
.oper a {
  float: left;
  width: 25px;
  height: 25px;
  margin: 11px 2px 0 0;
  text-indent: -9999px;
  background: url('../../assets/images/playbar.png');
}
.oper .icn-add {
  background-position: -88px -163px;
}
.oper .icn-share {
  background-position: -114px -163px;
}
.oper {
  width: 60px;
  height: 36px;
}
.play-audio audio {
  width: 493px;
  height: 20px;
  position: relative;
}
.play-audio {
  height: 20px;
}
.play .src {
  width: 14px;
  height: 15px;
  margin: 3px 0 0 13px;
  background: url('../../assets/images/playbar.png') -130px -103px;
}
.play .playtop {
  display: flex;
  justify-content: center;
  align-items: center;
}
.play .playtop a {
  color: #9b9b9b;
  font-size: 12px;
}
.play .playtop span {
  max-width: 220px;
  margin-left: 15px;
  color: #9b9b9b;
  font-size: 12px;
}
.play {
  width: 520px;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.container .pic {
  width: 34px;
  height: 35px;
  margin: 6px 15px 0 0;
}
.container .pic img {
  border-radius: 5px;
}

.btns .next {
  background-position: -80px -130px;
}
.btns .play {
  width: 36px;
  height: 36px;
  margin-top: 0;
  background-position: 0 -204px;
}
.btns .plv {
  background-position: 0 -130px;
}
.btns a {
  display: block;
  float: left;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  margin-top: 5px;
  text-indent: -9999px;
  background: url('../../assets/images/playbar.png');
}
.container .btns {
  width: 137px;
  height: 100%;
  padding-top: 6px;
}
.container {
  width: 980px;
  height: 100%;
  margin: 0 auto;
  display: flex;
}
.footerAuido {
  width: 100%;
  height: 47px;
  zoom: 1;
  margin-right: 67px;
  position: fixed;
  z-index: 99;
  bottom: 0;
  background: url('../../assets/images/playbar.png') 0px -6px;
}
/* 抽屉层 */
.drawer {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  cursor: pointer;
  width: 980px;
  background-color: #161616;
  position: absolute;
  top: -301px;
  height: 301px;
  transition: all 1s linear;
  color: white;
  .header {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    .left {
      font-size: 14px;
    }
  }
  .center {
    color: #ccc;
    font-size: 12px;
    display: flex;
    p {
      margin: 0 10px;
    }
  }
  .clear {
    display: flex;
    span {
      width: 200px;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 10px;
    }
  }
}

// 内容区域

.left::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.left::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #004ea1;
}
// .left::-webkit-scrollbar-track{
//   -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
//   border-radius: 10px;
//   background: #EDEDED;
// }

.songmassage {
  font-family: simsun, \5b8b\4f53;
  width: 100%;
  display: flex;
  font-size: 12px;
  color: #ccc;
  .left {
    width: 556px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 260px;
    .songname {
      height: 28px;
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      &:hover,
      &:hover .message {
        background: #0d0d0d;
        color: white;
      }
      // 小图标
      .playicon {
        float: left;
        width: 10px;
        height: 13px;
        padding-right: 10px;
        background: url(../../assets/images/playlist.png) -182px 0;
        opacity: 0;
      }
      .user {
        display: flex;
        align-items: center;
        padding: 0 10px;
        span {
          width: 300px;
        }
      }
      .message {
        color: #666;
        width: 100%;
        display: flex;
        justify-content: space-around;
        .anthor {
          width: 80px;
          overflow: hidden;
          display: block;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .icon {
          float: left;
          width: 14px;
          height: 16px;
          background: url(../../assets/images/playlist.png)-80px 0;
        }
      }
    }
  }
}
.right {
  height: 260px;
  width: 415px;
  color: white;
}
// 遮住播放图标
.play-audio i {
  width: 30px;
  height: 20px;
  background: #f1f3f4;
  position: absolute;
  left: 10px;
}
</style>